<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .main,table {
            width: 800px;
            margin: 0 auto;
        }
        .main {
            height: 40px;
            line-height: 40px;
        }
        table , th ,td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        .optd {
            width: 200px;
        }
        .addTable {
            width: 780px;
            padding: 10px;
            border: 1px solid green;
            position: fixed;
            top: 200px;
            left: 50%;
            margin-left: -400px;
            background-color: #fff;
            display: none;
        }
        .addTable table {
            width: 100%;
            text-align: center;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="main">
    <input type="button" value="新增一行" id="add"/>
</div>
<table id="table">

</table>
<!--用于新增表格获取数据的模块-->
<div class="addTable" id="addRow">
    <table>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td><input type="text" id="number"/></td>
            <td><input type="text" id="name"/></td>
            <td>
                <select id="gender">
                    <option >男</option>
                    <option >女</option>
                </select>
            </td>
            <td><input type="text" id="age"/></td>
        </tr>
    </table>

    <div>
        <input type="button" value="确定" id="sure"/>
        <input type="button" value="取消" id="cancle"/>
    </div>
</div>
<script src="common.js"></script>
<script>
    var head = ["学号","姓名","性别","年龄","操作"];
    var data = [
        {"number":"001","name":"李狗蛋","gender":"男","age":16},
        {"number":"002","name":"王大柱","gender":"女","age":17},
        {"number":"003","name":"李葫芦","gender":"男","age":15},
        {"number":"004","name":"小明","gender":"男","age":18},
        {"number":"005","name":"小红","gender":"女","age":16}
    ];
    console.log(data);
    var  data = [];
    //点击新增按钮后显示新增表格框，并且接收信息
    // function newMes() {
    //     id('addRow').style.display = 'block';
    //     //data[data.length] = id('number').innerHTML ;
    // }
    // // function takeInMes () {
    //     var num = id('number').value;
    //     var nam = id('name').value;
    //     var sex = id('gender').value;
    //     var ag = id('age').value;
    //     data[data.length] = {"number":num,"name":nam,"gender":sex,"age":ag};
    //     console.log(data);
    // }
    // id('add').onclick = newMes;
    // id('sure').onclick = takeInMes;


</script>
</body>
</html>